<template>
  <view class="reward_outer">
    <view class="reward_header_box">
      <view class="reward_header">
        <view class="reward_header_title">
          <text v-show="whereBean == 0">金豆转赠</text>
          <text v-show="whereBean == 1">云豆转赠</text>
        </view>
        <view class="reward_header_switchover" @click="changeWhereBean">
          <text v-show="whereBean == 0">切换云豆</text>
          <text v-show="whereBean == 1">切换金豆</text>
        </view>
      </view>
      <view class="reward_tabs">
        <circleTabs v-model="tabIndex" :tabList="list" mode="skew"></circleTabs>
      </view>
      <view class="reward_selectDate" v-if="tabIndex == 1">
        <view class="record_header_date" @click="isShowDatetimePicker = true"><text>{{ $u.timeFormat(this.dateValue,
          "yyyy年mm月") }}</text><text class="iconfont">&#xe771;</text></view>
      </view>
    </view>
    <!-- 转赠 -->
    <view class="reward_form" v-if="tabIndex == 0">
      <u--form labelPosition="left" ref="uForm">
        <u-form-item ref="item1">
          <view class="reward_form_userId">
            <view class="reward_form_userId_img">
              <image src="@/static/reward/user.png"></image>
            </view>
            <u--input border="none" placeholder="请输入用户ID或手机号" v-model="searchKeyword"> </u--input>
          </view>
          <view class="reward_form_userId_search" @click="getSearchUserInfo"><text>查询</text></view>
        </u-form-item>
        <u-form-item ref="item2">
          <view class="reward_form_to_userinfo" v-if="searchToUser.userId">
            <view class="reward_form_to_userinfo_left">
              <u-avatar size="36rpx" :src="searchToUser.avatar"></u-avatar>
            </view>
            <view class="reward_form_to_userinfo_center"><text>{{ searchToUser.nickName }}</text><text>|</text></view>
            <view class="reward_form_to_userinfo_right"><text>ID{{ searchToUser.userId }}</text></view>
          </view>
        </u-form-item>
        <u-form-item ref="item3">
          <view class="reward_form_gold" v-if="whereBean == 0">
            <view class="reward_form_gold_title">
              <image src="@/static/reward/bean.png" /><text>转赠金豆</text>
            </view>
            <view class="reward_form_gold_list">
              <view class="reward_form_gold_list_item" v-for="(goldMake, index) in goldMakeList" :key="index"
                :class="selectGoldIndex == index ? 'active' : ''" @click="changeselectGoldNum(index)">
                <text>{{ goldMake }}</text>
              </view>
            </view>
          </view>
          <view class="reward_form_num" v-if="whereBean == 1">
            <view class="reward_form_num_img">
              <image src="@/static/reward/bean.png"></image>
            </view>
            <u--input border="none" placeholder="请输入转赠数量" v-model="giveawayNum" type="number"> </u--input>
            <view class="reward_form_num_hign"><text>云豆</text></view>
          </view>
        </u-form-item>
        <!-- <u-form-item ref="item4" v-if="selectSource == 0">
          <view class="parities2" v-if="whereBean == 1"><text>手续费 ={{ giveawayNum * 0.1 }}云豆</text></view>
        </u-form-item> -->
        <u-form-item ref="item5">
          <view class="reward_form_pawsword">
            <view class="reward_form_pawsword_img">
              <image src="@/static/reward/password.png"></image>
            </view>
            <!-- <u--input border="none" placeholder="请输入支付密码" v-model="payPassword"> </u--input> -->
            <u--input border="none" placeholder="请输入支付密码" v-model="payPassword"
              :type="isShowPassword ? 'text' : 'password'">
              <view slot="suffix" @click="isShowPassword = !isShowPassword" style="margin-right: 20rpx">
                <u-icon name="eye-fill" v-if="isShowPassword"></u-icon>
                <u-icon name="eye-off" v-else></u-icon>
              </view>
            </u--input>
          </view>
        </u-form-item>
        <u-form-item ref="item6">
          <view class="reward_form_source" v-if="whereBean == 1">
            <u-radio-group placement="column" activeColor="#62C045" v-model="selectSource">
              <u-radio :name="0" :customStyle="{ marginBottom: '8px' }">
                <view class="reward_form_source_item">
                  <view class="reward_form_source_item_left"><text>自有云豆：</text></view>
                  <view class="reward_form_source_item_right"><text>{{ userProperty.cloudBean }}</text></view>
                </view>
              </u-radio>
              <u-radio :name="1" v-if="BourseUserInfo.position != 0">
                <view class="reward_form_source_item">
                  <view class="reward_form_source_item_left"><text>代理库存：</text></view>
                  <view class="reward_form_source_item_right"><text>{{ userProperty.proxy }}</text></view>
                </view>
              </u-radio>
            </u-radio-group>
            <view class="reward_form_source_fee" v-if="selectSource == 1"><text>手续费 ：免费</text></view>
            <view class="reward_form_source_fee" v-if="selectSource == 0 && whereBean == 1"><text>手续费 ={{ giveawayNum *
              0.1
            }}云豆</text></view>
          </view>
          <view class="reward_form_source" v-else>
            <view class="reward_form_source_fee" v-if="BourseUserInfo.position != 0"><text>手续费 ：免费</text></view>
            <view class="reward_form_source_fee" v-else><text>手续费 ={{ goldMakeList[selectGoldIndex] * 0.25
            }}云豆</text></view>
          </view>
        </u-form-item>
        <u-form-item ref="item7">
          <view class="reward_form_pawsword_affirm">
            <view @click="affirmPresentFn">
              <text>确定转赠</text>
            </view>
          </view>
        </u-form-item>
        <u-form-item ref="item8">
          <view class="reward_form_pawsword_rule">
            <view class="reward_form_pawsword_rule_title">
              <text>转赠规则：</text>
            </view>
            <view class="reward_form_pawsword_rule_text" v-show="whereBean == 1">
              <text>(1)会员转赠给公会成员扣10%手续费</text>
              <text> (2)公会成员自有库转赠需扣10%手续费。</text>
              <text> (3)公会成员代理转赠免手续费。</text>
            </view>
            <view class="reward_form_pawsword_rule_text" v-show="whereBean == 0">
              <text>(1)会员转赠扣25%云豆手续费</text>
              <text> (2)公会成员转赠免手续费。</text>
            </view>
          </view>
        </u-form-item>
      </u--form>
    </view>
    <!-- 转赠记录 -->
    <scroll-view :scroll-y="true" class="reward_record_list" v-if="tabIndex == 1"
      :style="{ height: rewardRecordListHeight + 'rpx' }" @scrolltolower="refreshList">
      <view class="reward_record_list_item" v-for="item, index in giveawayRecordList" :key="index">
        <view class="reward_record_list_item_top">
          <view class="reward_record_list_item_top_left">
            <u-avatar shape="square" size="88rpx"></u-avatar>
            <view class="reward_record_list_item_top_left_text">
              <text class="reward_record_list_item_top_left_text_name">{{ item.nickName }}</text>
              <text class="reward_record_list_item_top_left_text_id">ID:{{ item.targetId }}</text>
            </view>
          </view>
          <view class="reward_record_list_item_top_right">
            <text>{{ item.createdAt }}</text>
            <view class="give_mark" v-if="item.scoreId && item.scoreStatus == 0 && item.needScore != 1"><text>未评分</text>
            </view>
            <view class="give_mark" v-if="item.scoreId && item.scoreStatus == 0 && item.needScore == 1"
              @click="goScoreAgency(item)"><text>去评分</text></view>
            <view class="end_mark" v-if="item.scoreId && item.scoreStatus == 1"><text>已评分</text></view>
          </view>
        </view>
        <view class="reward_record_list_item_center"></view>
        <view class="reward_record_list_item_down">
          <view class="reward_record_list_item_down_left" v-if="item.entityType == 3">好友转赠</view>
          <view class="reward_record_list_item_down_left" v-if="item.entityType == 6">代理补贴</view>
          <view class="reward_record_list_item_down_center" v-if="item.fee"><text>手续费：</text><text class="price">{{
            item.fee }}</text>
          </view>
          <!-- 获得转赠 -->
          <view class="reward_record_list_item_down_right" v-if="item.transactionType == 1">
            <text class="reward_record_list_item_down_right_add">+{{ item.number
            }}</text>{{ item.currencyId | showCurrencyIdText }}
          </view>
          <!-- 转赠他人 -->
          <view class="reward_record_list_item_down_right" v-if="item.transactionType == 2"><text>-{{ item.number
          }}</text>{{ item.currencyId | showCurrencyIdText }}</view>
        </view>
      </view>
    </scroll-view>
    <u-popup :show="isShowAffirmPresent" @close="isShowAffirmPresent = false" round="38rpx"
      overlayStyle="background:#FF831E;opacity: 0.25;">
      <view class="affirm_present">
        <view class="affirm_present_title"><text>确认转赠信息</text></view>
        <view class="affirm_present_lasttitle"><text>为确保你的权益，请认真核对本次赠送信息</text></view>
        <view class="affirm_present_card">
          <view class="affirm_present_card_item">
            <text class="affirm_present_card_item_left">赠送人</text>
            <text class="affirm_present_card_item_right">{{ searchToUser.nickName }}</text>
          </view>
          <view class="affirm_present_card_item">
            <text class="affirm_present_card_item_left">ID</text>
            <text class="affirm_present_card_item_right">{{ searchToUser.userId }}</text>
          </view>
          <view class="affirm_present_card_item">
            <text class="affirm_present_card_item_left">是否是公会成员</text>
            <text class="affirm_present_card_item_right">{{ searchToUser.proxy == 1 ? '是' : '否' }}</text>
          </view>
          <view class="affirm_present_card_item">
            <text class="affirm_present_card_item_left">赠送数量</text>
            <text class="affirm_present_card_item_right" v-show="whereBean == 1">{{ giveawayNum }}个云豆</text>
            <text class="affirm_present_card_item_right" v-show="whereBean == 0">{{ goldMakeList[selectGoldIndex]
            }}个金豆</text>
          </view>
        </view>
        <view class="affirm_present_btn">
          <view @click="getGiveaway"><text>确认</text></view>
        </view>
        <view class="affirm_present_down">
          <text>赠送后将无法撤销，请谨慎操作</text>
        </view>
      </view>
    </u-popup>
    <u-popup :show="isShowPresentStatus" @close="isShowPresentStatus = false" round="38rpx"
      overlayStyle="background:#FF831E;opacity: 0.25;">
      <view class="affirm_present" style="height: 938rpx;">
        <view class="affirm_present_status_img">
          <image src="@/static/reward/presentsuccess.png" />
        </view>
        <view class="affirm_present_status_text"><text>赠送成功</text></view>
        <view class="affirm_present_card">
          <view class="affirm_present_card_item">
            <text class="affirm_present_card_item_left">赠送人</text>
            <text class="affirm_present_card_item_right">{{ searchToUser.nickName }}</text>
          </view>
          <view class="affirm_present_card_item">
            <text class="affirm_present_card_item_left">ID</text>
            <text class="affirm_present_card_item_right">{{ searchToUser.userId }}</text>
          </view>
          <view class="affirm_present_card_item">
            <text class="affirm_present_card_item_left">是否是公会成员</text>
            <text class="affirm_present_card_item_right">{{ searchToUser.proxy == 1 ? '是' : '否' }}</text>
          </view>
          <view class="affirm_present_card_item">
            <text class="affirm_present_card_item_left">赠送数量</text>
            <text class="affirm_present_card_item_right" v-show="whereBean == 1">{{ giveawayNum }}个云豆</text>
            <text class="affirm_present_card_item_right" v-show="whereBean == 0">{{ goldMakeList[selectGoldIndex]
            }}个金豆</text>
          </view>
        </view>
        <view class="affirm_present_btn">
          <view @click="isShowPresentStatus = false"><text>完成</text></view>
        </view>
      </view>
    </u-popup>
    <u-datetime-picker :show="isShowDatetimePicker" v-model="dateValue" mode="year-month"
      @cancel="isShowDatetimePicker = false" @confirm="confirmChangeDate"></u-datetime-picker>
    <u-notify ref="uNotify"></u-notify>
    <u-modal :show="showPayPwdmodal" title="您还未设置支付密码，是否前去设置？" cancelText="再等等" confirmText="马上去" :showCancelButton="true"
      @cancel="showPayPwdmodal = false" @confirm="goSetPasswordPage"></u-modal>
    <u-popup :show="isShowMarkModal" mode="center" round="60rpx" :closeable="true" @close="isShowMarkModal = false">
      <view class="give_mark_modal">
        <view class="give_mark_modal_top">
          <text class="give_mark_modal_top_title">发表评分</text>
          <text class="give_mark_modal_top_last_title">副文案内容副文案内容副文案内容</text>
        </view>
        <view class="give_mark_modal_center">
          <view class="give_mark_modal_center_response">
            <text>响应速度</text>
            <u-rate :count="5" v-model="responseValue" activeColor="#FFBC00"></u-rate>
          </view>
          <view class="give_mark_modal_center_serve">
            <text>服务态度</text>
            <u-rate :count="5" v-model="serveValue" activeColor="#FFBC00"></u-rate>
          </view>
        </view>
        <view class="give_mark_modal_down">
          <view @click="getScoreAgency"><text>发表评分</text></view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import circleTabs from "@/components/circle-tabs/circle-tabs.vue";
import "./rewardIconfont/iconfont.css";
import "./recordIconfont/iconfont.css";
import { reqSearchUserInfo, reqGiveaway, reqGiveawayRecord, reqScoreAgency } from '@/api/reward,js'
import { reqUserProperty, } from "@/api/my.js";
import { reqBourseUserInfo } from '@/api/all.js'
export default {
  data() {
    return {
      // 转赠与转赠列表切换
      tabIndex: 0,
      //  金豆转赠与金豆转赠切换
      whereBean: 1,
      // 转赠与转赠列表list
      list: [
        {
          id: 0,
          title: "转赠",
        },
        {
          id: 1,
          title: "转赠记录",
        },
      ],
      // 转增列表高度
      rewardRecordListHeight: 0,
      // 自由豆与代理豆切换
      selectSource: 0,
      // 金豆数量列表
      goldMakeList: ["99.00", "198.00"],
      // 选择哪个金豆数量
      selectGoldIndex: 0,
      // 是否展示确认转赠弹框
      isShowAffirmPresent: false,
      // 是否展示转赠状态弹框
      isShowPresentStatus: false,
      // 是否展示日期选择框
      isShowDatetimePicker: false,
      // 选择的日期
      dateValue: Number(new Date()),
      // 选择的日期
      selectDateValue: "",
      searchKeyword: '',
      searchToUser: {},
      giveawayNum: null,
      payPassword: '',
      // 转赠记录
      giveawayRecordList: [],
      giveawayRecordTotal: 0,
      pageNum: 1,
      userProperty: {},
      isShowPassword: false,
      BourseUserInfo: {},
      showPayPwdmodal: false,
      // 响应速度评分
      responseValue: 1,
      // 服务评分
      serveValue: 1,
      isShowMarkModal: false,
      // 评分ID
      needscoreId: null

    };
  },
  mounted() {
    this.computedHeight();
  },
  onShow() {
    this.getUserProperty()
    this.getBourseUserInfo()
  },
  components: {
    circleTabs,
  },
  methods: {
    // 跳转设置密码页面
    goSetPasswordPage() {
      this.showPayPwdmodal = false

      uni.navigateTo({
        url: `/pages/setPassword/index?pagename=pay`,
      });
    },
    async getBourseUserInfo() {
      const result = await reqBourseUserInfo()
      if (result.code == 200) {
        this.BourseUserInfo = result.data
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
    //  金豆转赠与金豆转赠切换
    changeWhereBean() {
      if (this.whereBean == 0) {
        this.whereBean = 1;
      } else if (this.whereBean == 1) {
        this.whereBean = 0;
      }
    },
    // 选择哪个金豆数量
    changeselectGoldNum(index) {
      this.selectGoldIndex = index
    },
    // 判断确认转赠
    affirmPresentFn() {
      if (uni.getStorageSync('userInfo')?.setPayPwd == 0) {
        this.showPayPwdmodal = true
        return
      }
      if (!this.searchToUser.userId) {
        uni.showToast({
          title: "请先查找选择用户",
          icon: "error",
        });
        return
      }
      if (this.whereBean == 1 && !this.giveawayNum) {
        uni.showToast({
          title: "请输入转赠数量",
          icon: "error",
        });
        return
      }
      if (!this.payPassword) {
        uni.showToast({
          title: "请输入支付密码",
          icon: "error",
        });
        return
      }
      this.isShowAffirmPresent = true
    },
    // 转赠
    async getGiveaway() {
      let currencyId = 1
      let num = 0
      //云豆
      if (this.whereBean == 1) {
        currencyId = this.selectSource == 0 ? 1 : 4
        num = this.giveawayNum * 1
      }
      //金豆
      if (this.whereBean == 0) {
        currencyId = 2
        num = this.goldMakeList[this.selectGoldIndex] * 1
      }

      const sendData = {
        currencyId: currencyId,
        targetId: this.searchToUser.userId,
        number: num,
        payPassword: this.payPassword
      }
      const result = await reqGiveaway(sendData)
      if (result.code == 200) {
        this.isShowAffirmPresent = false
        this.isShowPresentStatus = true
        this.getUserProperty()
      } else {
        this.$refs.uNotify.show({
          top: 10,
          type: 'error',
          color: '#FFFFFF',
          bgColor: 'red',
          message: result.msg,
          duration: 1000,
          fontSize: 20,
          safeAreaInsetTop: true
        })
      }
    },
    // 确认转赠
    GetAffirmPresent() {
      this.isShowAffirmPresent = false
      this.isShowPresentStatus = true
    },
    // 请求搜索用户信息
    async getSearchUserInfo() {
      if (!this.searchKeyword) {
        uni.showToast({
          title: "请输入用户ID或手机号",
          icon: "error",
        });
        return
      }
      const result = await reqSearchUserInfo({
        search: this.searchKeyword
      })
      if (result.code == 200) {
        // if (result.data.proxy != 1) {
        //   uni.showToast({
        //     title: "该用户不符合转赠要求，请仔细对转赠云豆及用户身份",
        //     icon: "error",
        //   });
        //   return
        // }
        this.searchToUser = result.data
      } else {
        uni.showToast({
          title: result.msg,
          icon: 'error'
        });
      }
    },
    // 到底后刷新列表
    refreshList() {
      if (this.giveawayRecordList.length >= this.giveawayRecordTotal) {
        uni.showToast({
          title: "没有更多了",
          icon: "error",
        });
      } else {
        this.pageNum++;
        this.getGiveawayRecord(1);
      }
    },
    // 转增记录
    async getGiveawayRecord(val) {
      const sendData = {
        pageNum: this.pageNum,
        pageSize: 10,
        date: this.selectDateValue,
      }
      const result = await reqGiveawayRecord(sendData)
      if (result.code == 200) {
        if (val != 1) {
          this.giveawayRecordList = result.data.list
        } else {
          this.giveawayRecordList = this.giveawayRecordList.concat(result.data.list);
        }
        this.giveawayRecordTotal = result.data.total
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
      console.log(result);
    },
    // 确定修改选择时间
    confirmChangeDate(e) {
      let selectDateStr = e ? e.value : this.dateValue;
      const resultDate = uni.$u.timeFormat(selectDateStr, "yyyy-mm");
      this.pageNum = 1
      this.selectDateValue = resultDate;
      this.isShowDatetimePicker = false;
      this.getGiveawayRecord();
    },
    // 请求用户资产信息
    async getUserProperty() {
      const result = await reqUserProperty();
      if (result.code == 200) {
        this.userProperty = result.data;
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
    // 去评分
    goScoreAgency(item) {
      this.responseValue = 1
      this.serveValue = 1
      this.needscoreId = item.scoreId
      this.isShowMarkModal = true
    },
    // 评分
    async getScoreAgency() {
      this.isShowMarkModal = false
      uni.showLoading({
        title: '正在发表评分'
      });
      const sendData = {
        scoreId: this.needscoreId,
        attitudeScore: this.serveValue,
        speedScore: this.responseValue
      }
      const result = await reqScoreAgency(sendData)
      uni.hideLoading()
      if (result.code == 200) {
        uni.showToast({
          title: '发表评分成功',
          icon: "success",
        });
        this.getGiveawayRecord()
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
    computedHeight() {
      uni.getSystemInfo({
        success: (res) => {
          const screenHeight = res.windowHeight; // 屏幕高度，单位为px
          this.rewardRecordListHeight = this.$pxToRpx(screenHeight) - 530;
        },
      });
    },
  },
  filters: {
    showCurrencyIdText(val) {
      let textArr = ['未知', '云豆', '金豆', '钻石', '代理云豆']
      return textArr[val]
    }
  },
  watch: {
    tabIndex(val) {
      if (val == 1) {
        this.pageNum = 1
        this.getGiveawayRecord()

      }
    },
    searchKeyword() {
      this.searchToUser = {}
    }
  }
};
</script>

<style lang="scss" scoped>
.reward_outer {
  width: 100vw;
  min-height: 100vh;
  background: #fffaef;

  .reward_header_box {
    height: 500rpx;
  }

  .reward_header {
    width: 750rpx;
    height: 345rpx;
    background: linear-gradient(to bottom, #ff7007 0%, #ffa749 100%);
    display: flex;
    flex-direction: column;
    align-items: center;

    .reward_header_title {
      margin-top: 75rpx;

      text {
        font-size: 46rpx;
        font-family: DreamHanSansSC;
        font-weight: 800;
        color: #fffaef;
      }
    }

    .reward_header_switchover {
      width: 112rpx;
      height: 35rpx;
      border: 1px solid #fffaef;
      border-radius: 17rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10rpx;

      text {
        font-size: 19rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
        color: #fffaef;
      }
    }
  }

  .reward_tabs {
    margin-top: -70rpx;
    height: 90rpx;
  }

  .reward_form {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -100rpx;

    .reward_form_pawsword {
      width: 545rpx;
      height: 109rpx;
      border: 3px solid #ff9e3c;
      border-radius: 26rpx;
      display: flex;
      align-items: center;

      .reward_form_pawsword_img {
        width: 40rpx;
        height: 40rpx;
        margin-left: 14rpx;
        margin-right: 28rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .reward_form_pawsword_affirm {
      display: flex;
      justify-content: center;

      view {
        width: 545rpx;
        height: 108rpx;
        background: linear-gradient(to right, #ff7007 0%, #ffa749 100%);
        border-radius: 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        text {
          font-size: 38rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #ffffff;
        }
      }
    }

    .reward_form_userId {
      width: 391rpx;
      height: 108rpx;
      border: 3px solid #ff8620;
      border-radius: 26rpx;
      display: flex;
      align-items: center;

      .reward_form_userId_img {
        width: 34rpx;
        height: 34rpx;
        margin-left: 14rpx;
        margin-right: 28rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .reward_form_userId_search {
      width: 142rpx;
      height: 108rpx;
      background: #2f2a26;
      border-radius: 26rpx;
      margin-left: 12rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      text {
        font-size: 31rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
        color: #fffaef;
      }
    }

    .reward_form_num_hign {
      margin-right: 46rpx;

      text {
        width: 59rpx;
        height: 28rpx;
        font-size: 31rpx;
        font-family: DreamHanSansSC;
        font-weight: 800;
        color: #ff7b14;
      }
    }

    .reward_form_num_outer {
      height: 162rpx;
      overflow: hidden;
      background: #ff8620;
      border-radius: 26rpx;

      .reward_form_num {
        width: 545rpx;
        height: 109rpx;
        border: 3px solid #ff9e3c;
        border-radius: 26rpx;
        display: flex;
        align-items: center;
        background: #fffaef;

        .reward_form_num_img {
          width: 40rpx;
          height: 40rpx;
          margin-left: 14rpx;
          margin-right: 28rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      .reward_form_num_down {
        display: flex;
        justify-content: space-between;

        .reward_form_num_down_left {
          margin-left: 30rpx;
        }

        .reward_form_num_down_right {
          margin-right: 40rpx;
        }

        text {
          font-size: 24rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #fffaef;
        }
      }
    }

    .reward_form_num {
      width: 545rpx;
      height: 109rpx;
      border: 3px solid #ff9e3c;
      border-radius: 26rpx;
      display: flex;
      align-items: center;
      background: #fffaef;
      margin-top: -40rpx;

      .reward_form_num_img {
        width: 40rpx;
        height: 40rpx;
        margin-left: 14rpx;
        margin-right: 28rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .parities {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-top: -34rpx;
      margin-right: 40rpx;

      text {
        font-size: 19rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
        color: #302b26;
        opacity: 0.6;
      }
    }

    .parities2 {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      margin-top: -34rpx;
      margin-left: 32rpx;

      text {
        font-size: 19rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
        color: #302b26;
        opacity: 0.6;
      }
    }
  }

  .user_list {
    width: 695rpx;
    height: 519rpx;
    background: #fffaef;
    border-radius: 38rpx;
    overflow: auto;

    .user_list_item {
      height: 50%;
      display: flex;
      align-items: center;
      position: relative;

      .user_list_item_left {
        width: 196rpx;
        height: 196rpx;
        border-radius: 26rpx;
        overflow: hidden;
        margin-left: 36rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .user_list_item_right {
        margin-left: 32rpx;

        .user_list_item_right_top {
          text {
            font-size: 29rpx;
            font-family: DreamHanSansSC;
            font-weight: normal;
            color: #ff7e17;
          }
        }

        .user_list_item_right_center {
          text {
            width: 181rpx;
            height: 36rpx;
            font-size: 47rpx;
            font-family: DreamHanSansSC;
            font-weight: 800;
            color: #302b27;
          }
        }

        .user_list_item_right_down {
          text {
            font-size: 22rpx;
            font-family: DreamHanSansSC;
            font-weight: normal;
            color: #302b27;
            opacity: 0.5;
          }
        }
      }

      .user_list_item_img {
        position: absolute;
        width: 38rpx;
        height: 38rpx;
        top: 26rpx;
        right: 26rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .back_open_popup {
    position: fixed;
    width: 100%;
    bottom: 20%;
    display: flex;
    justify-content: center;
    z-index: 999;

    .back_open_popup_inner {
      width: 103rpx;
      height: 103rpx;
      background: #4e4b41;
      opacity: 0.7;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      text {
        font-size: 60rpx;
        color: white;
      }
    }
  }

  .reward_record_list {
    margin-top: 28rpx;

    .reward_record_list_item {
      margin: 0 auto 38rpx;
      width: 711rpx;
      height: 198rpx;
      background: #F5F0E5;
      border-radius: 38rpx;

      .reward_record_list_item_top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        .reward_record_list_item_top_left {
          display: flex;
          margin-top: 24rpx;
          margin-left: 24rpx;

          .reward_record_list_item_top_left_text {
            display: flex;
            flex-direction: column;
            margin-left: 20rpx;
            justify-content: center;
            row-gap: 12rpx;

            .reward_record_list_item_top_left_text_name {
              font-size: 28rpx;
              font-family: DreamHanSansSC;
              font-weight: 600;
              color: #37322C;
            }

            .reward_record_list_item_top_left_text_id {
              font-size: 25rpx;
              font-family: DreamHanSansSC;
              font-weight: normal;
              color: #6C6862;
            }
          }
        }

        .reward_record_list_item_top_right {
          margin-top: 24rpx;
          font-size: 25rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #6C6862;
          margin-right: 30rpx;
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          .give_mark {
            width: 132rpx;
            height: 48rpx;
            border: 2rpx solid #FFA814;
            border-radius: 26rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10rpx;

            text {
              font-family: PingFang SC;
              font-size: 28rpx;
              color: #FFA814;

            }
          }

          .end_mark {
            width: 132rpx;
            height: 48rpx;
            border: 2rpx solid #6C6862;
            border-radius: 26rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10rpx;

            text {
              font-family: PingFang SC;
              font-size: 28rpx;
              color: #6C6862;

            }
          }
        }
      }

      .reward_record_list_item_center {
        width: 664rpx;
        height: 2rpx;
        background: #000000;
        opacity: 0.1;
        margin: 16rpx auto 14rpx;
      }

      .reward_record_list_item_down {
        display: flex;
        justify-content: space-between;

        .reward_record_list_item_down_left {
          font-size: 28rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #37322C;
          opacity: 0.6;
          margin-left: 26rpx;
        }

        .reward_record_list_item_down_center {
          font-size: 28rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: rgb(55, 50, 44, 0.6);
          margin-left: 26rpx;
          display: flex;
          align-items: center;

          .price {
            color: #37322C;
            font-weight: 600;
          }
        }

        .reward_record_list_item_down_right {
          font-size: 28rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #37322C;
          margin-right: 28rpx;

          .reward_record_list_item_down_right_add {
            color: #FC4100;
          }
        }
      }
    }
  }

  .reward_form_to_userinfo {
    display: flex;
    align-items: center;
    margin-top: -20rpx;

    .reward_form_to_userinfo_center {
      margin-left: 10rpx;
      display: flex;
      align-items: center;
      column-gap: 10rpx;
    }

    .reward_form_to_userinfo_right {
      margin-left: 10rpx;
    }

    text {
      font-size: 19rpx;
      font-family: Dream Han Sans SC;
      font-weight: normal;
      color: #302b26;
      opacity: 0.6;
    }
  }

  .reward_form_source {
    width: 100%;

    .reward_form_source_item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      text {
        font-size: 25rpx;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #6c6862;
      }

      .reward_form_source_item_right {
        text {
          font-weight: 600;
        }
      }
    }

    .reward_form_source_fee {
      display: flex;
      justify-content: flex-end;

      text {
        font-size: 19rpx;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #302b26;
        opacity: 0.6;
      }
    }
  }

  .reward_form_pawsword_rule {
    .reward_form_pawsword_rule_title {
      font-size: 25rpx;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #6c6862;
    }

    .reward_form_pawsword_rule_text {
      width: 548rpx;
      font-size: 25rpx;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #6c6862;
      line-height: 38rpx;
      opacity: 0.6;
      text-indent: 3.5ch;

      text {
        display: flex;
      }
    }
  }

  .reward_form_gold {
    .reward_form_gold_title {
      display: flex;
      align-items: center;

      image {
        width: 36rpx;
        height: 36rpx;
      }

      text {
        font-size: 31rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #302b26;
        margin-left: 10rpx;
      }
    }

    .reward_form_gold_list {
      width: 546rpx;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      row-gap: 20rpx;
      margin-top: 26rpx;

      .reward_form_gold_list_item {
        width: 160rpx;
        height: 78rpx;
        border-radius: 26rpx 26rpx 26rpx 26rpx;
        opacity: 1;
        border: 3rpx solid #ffc38d;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;

        text {
          font-size: 31rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #ffc38d;
        }
      }

      .active {
        width: 160rpx;
        height: 78rpx;
        border-radius: 26rpx 26rpx 26rpx 26rpx;
        opacity: 1;
        border: 3rpx solid #FF7B14;

        text {
          font-size: 31rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #FF7B14;
        }
      }
    }
  }

  .affirm_present {
    width: 750rpx;
    height: 731rpx;
    background: #FFFAEF;
    border-radius: 38rpx 38rpx 0rpx 0rpx;

    .affirm_present_title {
      display: flex;
      justify-content: center;
      margin-top: 68rpx;

      text {
        font-size: 38rpx;
        font-family: Dream Han Sans SC;
        font-weight: 600;
        color: #302B27;
      }
    }

    .affirm_present_lasttitle {
      display: flex;
      justify-content: center;
      margin-top: 26rpx;

      text {
        font-size: 31rpx;
        font-family: Dream Han Sans SC;
        font-weight: normal;
        color: #000000;
        opacity: 0.4;
      }
    }

    .affirm_present_card {
      margin-top: 44rpx;
      display: flex;
      flex-direction: column;
      row-gap: 20rpx;

      .affirm_present_card_item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .affirm_present_card_item_left {
          font-size: 31rpx;
          font-family: Dream Han Sans SC;
          font-weight: normal;
          color: #000000;
          opacity: 0.8;
          margin-left: 42rpx;
        }

        .affirm_present_card_item_right {
          font-size: 31rpx;
          font-family: Dream Han Sans SC;
          font-weight: normal;
          color: #000000;
          opacity: 0.6;
          margin-right: 42rpx;
        }
      }
    }

    .affirm_present_btn {
      display: flex;
      justify-content: center;
      margin-top: 60rpx;

      view {
        width: 545rpx;
        height: 108rpx;
        border-radius: 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(to right, #ff7007 0%, #ffa749 100%);

        text {
          font-size: 38rpx;
          font-family: Dream Han Sans SC;
          font-weight: 600;
          color: #FFFFFF;
        }
      }
    }

    .affirm_present_down {
      display: flex;
      justify-content: center;
      margin-top: 20rpx;

      text {
        font-size: 31rpx;
        font-family: Dream Han Sans SC;
        font-weight: normal;
        color: #000000;
        opacity: 0.4;
      }
    }

    .affirm_present_status_img {
      width: 190rpx;
      height: 190rpx;
      margin: 92rpx auto 0;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .affirm_present_status_text {
      display: flex;
      justify-content: center;
      margin-top: 42rpx;

      text {
        font-size: 38rpx;
        font-family: DreamHanSansSC;
        font-weight: 600;
        color: #302B27;
      }
    }
  }

  .reward_selectDate {
    display: flex;
    justify-content: flex-end;

    .record_header_date {

      width: 199rpx;
      height: 48rpx;
      background: #f5f0e5;
      border: 2rpx solid #ffa814;
      border-radius: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
      margin-top: 32rpx;

      text {
        font-size: 25rpx;
        font-family: Dream Han Sans SC;
        font-weight: normal;
        color: #ffa814;
      }
    }
  }

  .give_mark_modal {
    width: 622rpx;
    height: 544rpx;
    border-radius: 60rpx;
    opacity: 1;
    background: #FFFAEF;

    .give_mark_modal_top {
      display: flex;
      flex-direction: column;
      align-items: center;

      .give_mark_modal_top_title {
        font-family: PingFang SC;
        font-size: 36rpx;
        font-weight: 600;
        color: #222222;
        margin-top: 60rpx;
      }

      .give_mark_modal_top_last_title {
        font-family: PingFang SC;
        font-size: 30rpx;
        color: #AAAAAA;
        margin-top: 6rpx;
      }
    }

    .give_mark_modal_center {
      margin-top: 48rpx;

      .give_mark_modal_center_response {
        display: flex;
        justify-content: center;
        align-items: center;

        column-gap: 100rpx;

        text {
          font-family: PingFang SC;
          font-size: 30rpx;
          color: #AAAAAA;
        }
      }

      .give_mark_modal_center_serve {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 100rpx;
        margin-top: 28rpx;

        text {
          font-family: PingFang SC;
          font-size: 30rpx;
          color: #AAAAAA;
        }
      }
    }

    .give_mark_modal_down {
      display: flex;
      justify-content: center;
      margin-top: 80rpx;

      view {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 517rpx;
        height: 82rpx;
        border-radius: 144rpx;
        opacity: 1;
        background: linear-gradient(270deg, #FF7208 0%, #FFAE51 100%);

        text {
          font-family: PingFang SC;
          font-size: 32rpx;
          font-weight: 500;
          color: #FFFFFF;

        }
      }
    }
  }
}
</style>
